<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div class="app">
        <h1 v-color-red>{{title}}</h1>

        <p v-color-red v-color-green>
            这是一个段落
        </p>

        <span v-color-red>12312</span>

        <input type="text" v-focus>

        <p v-abc:msg.haha.qwe.asd.zxc="123">hgsfdv</p>
    </div>
</body>
<script src="../vue.global.js"></script>
<script>
    
    const { createApp } = Vue;

    const app = createApp({
        data(){
            return {
                title:"自定义指令"
            }
        },
        // 局部指令：只有当前组件才可以使用，谁注册谁使用
        directives:{
            colorGreen: (el)=>{
                el.style.color = "green";
            },
            focus:{
                created(el){
                    el.autofocus = true
                }
            },
            abc:(el, binding, vnode)=>{
                console.log(el);
                console.log(binding);
                console.log(vnode);
            }
        }
    });

    // 全局指令：所有组件都可以使用
    app.directive( "colorRed" , (el)=>{
        el.style.background = "red";
    })

    app.mount(".app");

</script>
</html>